<template>
  <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="container-title-p">
                    操作日志
                    <i class="iconfont icon-jiantou"></i>
                  </span>
                  <span>系统日志</span>
                  </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <!-- <el-select v-model="select_operater" placeholder="筛选操作人" clearable  class="handle-select mr10">
                <el-option label="员工1" value="0"></el-option>
                <el-option label="员工2" value="1"></el-option>
                <el-option v-for="(type_item,index) in operaterCenter" :key="index" :label="type_item.a_type_name" :value="type_item.a_tid"></el-option>
            </el-select> -->
            <el-input placeholder='方法' clearable class="handle-btn" style='width:200px;margin-right: 10px;' v-model='params.method'></el-input>
            <el-input placeholder='路径' clearable class="handle-btn" style='width:200px;margin-right: 10px;' v-model='params.path'></el-input>
            <el-input placeholder='管理员标识' clearable class="handle-btn" style='width:200px;margin-right: 10px;' v-model='params.admin'></el-input>
            <!-- <el-date-picker class="handle-date" v-model="select_date" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="交易开始日期" end-placeholder="交易结束日期" :picker-options="orderDatePicker">
            </el-date-picker> -->

            <el-button type="primary" icon="search" class="handle-btn" @click="getList">搜索</el-button>

        </div>  
        <br>

        <el-table :data="operateLogCenter" border style="width: 100%" ref="multipleTable">
            <el-table-column  prop="admin.loginName" label="管理员名称"> 
            </el-table-column>
            <el-table-column  prop="admin.id" label="管理员标识"> 
            </el-table-column>
            <el-table-column  prop="createTime" label="操作时间"> 
            </el-table-column>
            <el-table-column  prop="ip" label="IP"> 
            </el-table-column>
            <el-table-column  prop="method" label="方法"> 
            </el-table-column>
            <el-table-column  prop="path" label="请求地址"> 
            </el-table-column>
            <el-table-column label="操作"> 
                <template slot-scope='scope'>
                    <el-button type='success' @click='detail(scope.row)' size='small'>查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                  :page-size="params.size"
                  @current-change ="handleCurrentChange"
                  layout="prev, pager, next"
                  :total="all_page">
            </el-pagination>
        </div>
        <el-dialog :visible.sync='showdetail'
        title='查看详情'>
        <el-form label-width='150px'>
            <el-form-item label='管理员：'>
                {{adminData.admin.loginName}}
            </el-form-item>
            <el-form-item label='操作时间：'>
                {{adminData.createTime}}
            </el-form-item>
            <el-form-item label='IP：'>
                {{adminData.ip}}
            </el-form-item> 
            <el-form-item label='地址：'>
                {{adminData.path}}
            </el-form-item> 
            <el-form-item label='方法：'>
                {{adminData.method}}
            </el-form-item> 
            <el-form-item label='鉴权：'>
                {{adminData.auth}}
            </el-form-item> 
            <el-form-item label='内容：'>
                {{adminData.payload }}
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="showdetail = false" size="small">取 消</el-button>
        </span>
        </el-dialog>   

        <loading v-if='loading' :tip='tip'></loading>
  </div>
</template>
<script>
import { api,apiGet,apiPatch,apiDelete} from '@/api/index';
import loading from '@/components/common/loading.vue';
export default {
    data(){
        return {
            loading:false,
            tip:'',
            showdetail:false,
            select_date:'',
            orderDatePicker: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            select_operater:'',
            operaterCenter:[],
            operateLogCenter:[],
            all_page:1,
            adminData:{
                admin:{},
            },
            params:{
                page:0,
                size:8,
                id:'',
                method:'',
                path:'',
                admin:'',
            },
        }
    },
    components:{
        loading
    },
    methods:{
        handleCurrentChange(val){
            this.params.page=val-1;
            this.getList();
        },
        detail(row){
            this.adminData=row;
            this.showdetail=true;
        },
        getList(){
            this.loading=true;
            this.tip='获取列表';
            this.params.method=this.params.method.toUpperCase();
            apiGet.admin.adminLog(this.params).then(res=>{
                //console.log(res);
                this.loading=false;
                this.operateLogCenter=res.content;
                this.all_page=res.totalElements;
            })
        }
    },
    mounted () {
        this.getList();
    }
}
</script>
<style scoped>
.handle-select{
    width: 200px;
    margin: 0 5px 10px 0;
}
.handle-date{
    width:400px;
    display:inline-block;
    vertical-align:top;
    margin:0 5px 20px 0;
}
.handle-btn{

    vertical-align:top;
}
</style>
